<div class="modal">
  <div class="modal-dialog modal-wide">
    <div class="modal-content">
      <div class="modal-header">
        <h2 ng-if="formElement.type != 'expression'">{{'FORM-BUILDER.POPUP.EDIT-TITLE' | translate: formElement}}</h2>
        <h2 ng-if="formElement.type == 'expression'">{{'FORM-BUILDER.POPUP.EXPRESSION-TITLE' | translate}}</h2>
      </div>
      <div class="modal-body">
        <div class="center-pane">
          <div class="content">
            <div class="clearfix">
              <ul class="tabs clearfix">
                <li ng-class="{'active': tab.id == activeTab.id}"
                    ng-if="!tab.show || tab.show.indexOf(formElement.type) >= 0"
                    ng-repeat="tab in formTabs">
                  <a ng-click="tabClicked(tab)">{{tab.title && (tab.title | translate) || tab.name}}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="form-group" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
          <label translate="FORM-BUILDER.COMPONENT.LABEL"></label>
          <input auto-focus class="form-control" ng-change="formElementNameChanged(formElement)"
                 ng-model="formElement.name" type="text">
        </div>

        <div class="clearfix" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
          <div class="form-group">
            <div class="checkbox">
              <label>
                <input ng-model="formElement.overrideId" type="checkbox">
                {{'FORM-BUILDER.COMPONENT.OVERRIDEID' | translate}}
              </label>
            </div>
          </div>

          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.ID"></label>
            <input class="form-control" editor-input-check ng-disabled="!formElement.overrideId"
                   ng-model="formElement.id"
                   type="text">
          </div>

          <div ng-show="formElement.type !== 'expression' && formElement.type !== 'hyperlink' && formElement.type !== 'spacer' && formElement.type !== 'horizontal-line' && formElement.type !== 'headline' && formElement.type !== 'headline-with-line'">
            <div class="row">
              <div class="form-group col-md-2">
                <div class="checkbox">
                  <label>
                    <input ng-model="formElement.required" type="checkbox">
                    {{'FORM-BUILDER.COMPONENT.REQUIRED' | translate}}
                  </label>
                </div>
              </div>
              <div class="form-group col-md-10">
                <div class="checkbox">
                  <label>
                    <input ng-model="formElement.readOnly" type="checkbox">
                    {{'FORM-BUILDER.COMPONENT.READONLY' | translate}}
                  </label>
                </div>
              </div>
            </div>
          </div>

          <div ng-show="formElement.type === 'functional-group' || formElement.type === 'people' || formElement.type === 'dropdown' || formElement.type === 'date' || formElement.type === 'text' || formElement.type === 'password' || formElement.type === 'multi-line-text' || formElement.type === 'integer' || formElement.type === 'decimal'">
            <label translate="FORM-BUILDER.COMPONENT.PLACEHOLDER"></label>
            <input class="form-control" ng-model="formElement.placeholder" type="text">
          </div>
        </div>

        <div ng-if="(activeTab.id == 'options') && (formElement.type === 'radio-buttons' || formElement.type === 'dropdown')">

          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.OPTIONS"></label>

            <div>
              <div class="input-group" ng-repeat="option in formElement.options" style="margin-bottom: 5px">
                <div class="input-group-addon">
                  <input ng-disabled="optionsExpressionEnabled" ng-model="formElement.value" ng-value="option.name"
                         type="radio">
                </div>

                <input class="form-control" id="firstDropdownOption" ng-disabled="optionsExpressionEnabled"
                       ng-if="$index == 0"
                       ng-model="option.name" style="background-color: #E6E6E6;" type="text">
                <input class="form-control" ng-disabled="optionsExpressionEnabled" ng-if="$index > 0"
                       ng-model="option.name"
                       type="text">

                <a bs-tooltip="'FORM-BUILDER.COMPONENT.DROPDOWN-EMPTY-VALUE-HELP'|translate" class="input-group-addon"
                   data-animation="am-fade-and-scale" data-placement="left" data-type="info"
                   ng-if="$index == 0">
                  <i class="glyphicon glyphicon-question-sign"></i>
                </a>

                <a class="input-group-addon" ng-click="removeOption($index)" ng-disabled="optionsExpressionEnabled"
                   ng-if="$index > 1"><i class="icon icon-remove"></i></a>
              </div>

              <div>
                <input class="form-control" ng-blur="confirmNewOption($event)"
                       ng-disabled="optionsExpressionEnabled" ng-keydown="optionKeyDown($event)"
                       ng-model="newOption.name" placeholder="{{'FORM-BUILDER.COMPONENT.ADD-OPTION' | translate}}"
                       type="text">
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="checkbox">
              <label>
                <input ng-change="optionsExpressionChanged($event)"
                       ng-init="optionsExpressionEnabled = formElement.optionsExpression != null && formElement.optionsExpression != ''"
                       ng-model="optionsExpressionEnabled" type="checkbox">
                {{'FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION-ENABLED' | translate}}
              </label>
            </div>
          </div>

          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION"></label>
            <textarea class="form-control" id="readonly-text-value" ng-disabled="!optionsExpressionEnabled"
                      ng-model="formElement.optionsExpression" rows="3"></textarea>
            <div class="subtle" style="padding: 5px 0 5px 1px;"
                 translate="FORM-BUILDER.MESSAGE.OPTIONS-EXPRESSION-HELP"></div>
          </div>

        </div>

        <div ng-if="activeTab.id == 'upload' && formElement.type === 'upload'">
          <div class="form-group">
            <div class="checkbox">
              <label>
                <input ng-model="formElement.params.multiple" type="checkbox">
                {{'FORM-BUILDER.COMPONENT.UPLOAD-ALLOW-MULTIPLE' | translate}}
              </label>
            </div>
          </div>
        </div>
        <div ng-if="activeTab.id == 'advanced' && (formElement.type === 'password')">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
                  class="form-control" maxlength="5" ng-model="formElement.params.minLength" number-input-check
                  type="text">
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
                  class="form-control" maxlength="5" ng-model="formElement.params.maxLength" number-input-check
                  type="text">
          </div>
          <div class="row">
            <div class="form-group col-md-12">
              <div class="checkbox">
                <label>
                  <input ng-model="formElement.params.passwordunmask" type="checkbox">
                  {{'FORM-BUILDER.COMPONENT.PASSWORD-UNMASK-OPTION' | translate}}?
                </label>
              </div>
            </div>
          </div>
        </div>
        <div ng-if="activeTab.id == 'advanced' && (formElement.type === 'text' || formElement.type === 'multi-line-text' || formElement.type === 'decimal' || formElement.type === 'integer')">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
                  class="form-control" maxlength="5" ng-model="formElement.params.minLength" number-input-check
                  type="text">
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
                  class="form-control" maxlength="5" ng-model="formElement.params.maxLength" number-input-check
                  type="text">
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.REGEX-PATTERN"></label>
            <div class="input-group">
              <span class="input-group-addon">/^</span> <input class="form-control"
                                                               ng-model="formElement.params.regexPattern"
                                                               type="text">
              <span class="input-group-addon">$/</span>
            </div>
          </div>
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label translate="FORM-BUILDER.COMPONENT.MASK.TITLE"></label>
                <input class="form-control" ng-model="formElement.params.mask" type="text">
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.TITLE</label>
                <ul>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBER</span>: <b>9</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.LETTER</span>: <b>A</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBERORLETTER</span>: <b>*</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.OPTIONAL</span>: <b>?</b></li>
                  <li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.PHONE</span>: <b>(99) 9999-9999</b></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div ng-if="activeTab.id == 'advanced' && formElement.type === 'hyperlink'">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.HYPERLINK-URL"></label> <input
                  class="form-control" ng-model="formElement.params.hyperlinkUrl" type="text">
          </div>
        </div>

        <div ng-if="activeTab.id == 'general' && formElement.type === 'expression'">
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.EXPRESSION"></label>
            <textarea class="form-control" id="readonly-text-value" ng-model="formElement.expression"
                      rows="3"></textarea>
            <div class="subtle" style="padding: 5px 0 5px 1px;" translate="FORM-BUILDER.MESSAGE.EXPRESSION-HELP"></div>
          </div>
          <div class="form-group">
            <label translate="FORM-BUILDER.COMPONENT.SIZE"></label>
            <select class="form-control" ng-model="formElement.params.size">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="pull-right">
          <button class="btn btn-sm btn-default" ng-click="doneEditing()" type="button">
            {{'GENERAL.ACTION.CLOSE' | translate}}
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
